<template>
  <view class="detail-container">
    <!-- 商品轮播 -->
    <swiper class="swiper" indicator-dots autoplay circular>
      <swiper-item v-for="(item, index) in goods.images" :key="index">
        <image class="slide-image" :src="BASE_URL+item.imageUrl" mode="aspectFit" />
      </swiper-item>
    </swiper>

    <!-- 商品信息 -->
    <view class="goods-info">
      <view class="price-box">

      </view>
      <text class="title">{{ goods.proName }}</text>
      <text class="subtitle">{{ goods.description }}</text>
    </view>

    <!-- 规格选择 -->
    <!-- <view class="spec-box" @click="showSpecPopup = true">
      <text class="spec-label">选择规格</text>
      <text class="spec-value">{{ selectedSpec || "请选择规格" }}</text>
      <image class="arrow" src="/static/arrow-right.png" />
    </view> -->

    <!-- 商品详情 -->
    <view class="detail-content">
      <rich-text :nodes="goods.description" />
    </view>

    <!-- 固定在底部的工具栏 -->
    <view class="toolbar">
      <!--收藏按钮-->
      <button class="btn consult" style="background: #fff; color: #000" @click="addToCollection">收藏</button>
      <button class="btn consult" @click="navigateToConsult">联系咨询</button>
    </view>
  </view>
  <!-- 规格弹窗 -->
</template>

<script>
import { getProd } from '@/api/product'
import { saveMyCollection } from '@/api/collection'
import {BASE_URL} from '@/utils/request'

export default {
  data() {
    return {
      BASE_URL: BASE_URL,
      id:0,
      showSpecPopup: false,
      selectedSpec: "",
      goods: {
        title: "智能工业机器人",
        subtitle: "自动化生产线解决方案",
        price: 89999,
        originalPrice: 129999,
        sales: 156,
        images: [
          "/static/product/detail/1.jpg",
          "/static/product/detail/2.jpg",
          "/static/product/detail/3.jpg",
        ],
        specs: ["标准版", "高级版", "企业定制版"],
        detail: `
          <div style="padding:20rpx;">
            <h3>产品特色</h3>
            <p>• 六轴联动精密控制</p>
            <p>• 支持24小时连续作业</p>
            <p>• 搭载AI视觉识别系统</p>
            <img src="/static/product/detail/detail1.jpg" width="100%" />
          </div>
        `,
      },
    };
  },
  methods: {
    selectSpec(spec) {
      this.selectedSpec = spec;
      this.showSpecPopup = false;
    },
    async addToCollection() {
      
      try {
        // 保存到我的收藏中
        let param ={
          productId: this.id,
          productType: 2,
        }
        const res =await saveMyCollection(param)
        // console.log("res===",res);
        if(res.code=='1'){
          if(res.isError=='allery'){
            uni.showToast({ title: "已在收藏列表中" });
          }else{
            uni.showToast({ title: "已加入收藏" });
          }
        }
      } catch (error) {
        console.error('加入收藏失败', error)
      }
    },
    buyNow() {
      if (!this.selectedSpec) {
        uni.showToast({ title: "请先选择规格", icon: "none" });
        return;
      }
      uni.navigateTo({ url: "/pages/order/create" });
    },
    // 删除原有的 addToCart 和 buyNow 方法
    navigateToConsult() {
      uni.navigateTo({
        url: "/pages/contact/index",
      });
    },
  },
  async onLoad(options) {
    
    this.id = options.id;
    // console.log(this.id )
    try {
      // 获取推荐产品列表

      const res =await getProd(this.id)
      // console.log("res===",res);
      if(res){
        this.goods = res;

      }
    } catch (error) {
      console.error('获取产品列表失败', error)
    }
  }
};
</script>

<style>
.detail-container {
  padding-bottom: 100px;
}

.swiper {
  height: 750rpx;
}
.slide-image {
  width: 100%;
  height: 100%;
}

.goods-info {
  padding: 20rpx;
  background: #fff;
}
.price-box {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.current-price {
  color: #e4393c;
  font-size: 44rpx;
  font-weight: bold;
}
.original-price {
  color: #999;
  font-size: 28rpx;
  text-decoration: line-through;
  margin: 0 20rpx;
}
.sales {
  color: #666;
  font-size: 28rpx;
}
.title {
  font-size: 36rpx;
  color: #333;
  line-height: 1.4;
}
.subtitle {
  color: #999;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.spec-box {
  display: flex;
  align-items: center;
  padding: 25rpx 20rpx;
  margin: 20rpx 0;
  background: #fff;
}
.spec-label {
  color: #666;
  font-size: 28rpx;
}
.spec-value {
  flex: 1;
  margin: 0 20rpx;
  color: #333;
}
.arrow {
  width: 32rpx;
  height: 32rpx;
}

.detail-content {
  margin-top: 20rpx;
  background: #fff;
  padding: 20rpx;
  min-height: 500rpx;
}

/* 修改底部工具栏样式 */
.toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn.consult {
  width: 40%;
  background: #007AFF;
  color: white;
  border-radius: 12rpx;  /* 调整为直角矩形 */
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  transition: all 0.3s;
}

.btn.consult:active {
  opacity: 0.8;
}
</style>